<script lang="ts" setup>
  import { ref, watch, toRefs } from "vue"
  import gmDialog from '@/components/Dialog/index.vue'
  import { cloneDeep } from "lodash-es"
  import { saveOrUpdateTipDepartment } from "@/api/tip"
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import useForm from '@/hooks/useForm'

  interface Props {
    data?: any
  }

  const props = withDefaults(defineProps<Props>(), {
    data: ()=>({
      
    }),
  })

  const { data } = toRefs(props)
  const form = ref<any>(cloneDeep(data.value) || {})
  const formRef = ref<FormInstance>()
  const dialogRef = ref<InstanceType<typeof gmDialog>>()
  const emit = defineEmits(['cancel','success'])

  const monthList = ref<any>([
    { name: '1月', value: 1 },
    { name: '2月', value: 2 },
    { name: '3月', value: 3 },
    { name: '4月', value: 4 },
    { name: '5月', value: 5 },
    { name: '6月', value: 6 },
    { name: '7月', value: 7 },
    { name: '8月', value: 8 },
    { name: '9月', value: 9 },
    { name: '10月', value: 10 },
    { name: '11月', value: 11 },
    { name: '12月', value: 12 }
  ])

  const rules = ref<FormRules>({
    month: [
      { required: true, message: '提前提醒月份', trigger: 'change' },
    ],
    day:[]
  })

  watch(data, (newData: any) => {
    form.value = cloneDeep(newData) || {}
    if (newData.typeName == '维护') {
      rules.value.day = [{ required: false, message: '提前提醒频率', trigger: 'change' }]
    } else {
      rules.value.day = [{ required: true , message: '提前提醒频率', trigger: 'change' }]
    }
  }, { immediate: true })

  const { handleSubmit } = useForm({formType: 'dialog', emit:emit})

  const cancel = ()=>{
    emit('cancel')
  }

  const success = ()=>{
    handleSubmit(saveOrUpdateTipDepartment, formRef.value, form.value, dialogRef.value)
  }

</script>

<template>
  <gm-dialog
    ref="dialogRef"
    title="新增/编辑提醒"
    @cancel="cancel"
    @comfirm="success">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="left">
      <el-form-item prop="typeName" label="类型">
        <el-input v-model="form.typeName" placeholder="请输入" disabled />
      </el-form-item>
      <el-form-item  prop="month" label="提前提醒月份">
        <!-- <el-input v-model="form.month" placeholder="请输入" />  -->
        <el-select clearable v-model="form.month" placeholder="请选择">
          <el-option :label="item.name" :value="item.value" v-for="item in monthList" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  prop="day" label="提醒频率">
        <el-input style="width: 300px" v-model="form.day" placeholder="请输入" type="number" min="1" /><text style="margin-left: 10px">天</text>
      </el-form-item>
    </el-form>
  </gm-dialog>
</template>

<style lang="scss" scoped>
</style>
